import React, { Component } from "react";
import './index.css';
import Header from '../Header'
import Main from '../Main';
import Footer from '../Footer'
import { nanoid } from 'nanoid';

export default class Todo extends Component {

    state = {
        //保存 state 的最小原则
        todos: [
            {id: 1, title: '买菜', done: true},
            {id: 2, title: '参加婚礼', done: false},
            {id: 3, title: '邮寄退货', done: false},
        ]
    }

    render() {
        //解构赋值
        let {todos} = this.state;

        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <Main delTodo={this.delTodo}  todos={todos}  checkTodo={this.checkTodo} />
                    <Footer clearDone={this.clearDone} checkAllTodo={this.checkAllTodo} todos={todos}  />
                </div>
            </div>
        );
    }

    //封装方法 新增任务
    addTodo = (title) => {
        let {todos} = this.state;
        //拼接任务对象
        let obj = {
            // id: Date.now(), //任务的 id    nanoid
            id: nanoid(), //任务的 id    nanoid
            title: title, //任务的标题
            done: false  //未完成状态
        }
        //将 obj 插入到 todos 数组中
        todos.push(obj);

        //重新渲染
        this.setState({
            todos: todos
        })
    }

    //封装方法 修改任务的状态
    checkTodo = (id, status) => {
        let {todos} = this.state;
        //遍历 todos
        for(let i=0;i<todos.length;i++){
            //如果 id 与正在遍历的任务 id 相同, 修改任务的状态
            if(id === todos[i].id){
                todos[i].done = status;
            }
        }
        //修改状态 更新视图
        this.setState({
            todos: todos
        })
    }

    //封装方法 删除指定 id 的任务   splice 作用: 删除数组中的元素, 填充新元素  arr.splice(index, count, news)   arr.splice(3, 1)
    delTodo = (id) => {
        //
        // let result = this.state.todos.filter(item => {
        //     if(item.id === id){
        //         return false;
        //     }else{
        //         return true;
        //     }
        // })
        //箭头函数简写
        let result = this.state.todos.filter(item => item.id !== id);

        //更新数据和视图  this.setState 修改状态是 『异步的』
        this.setState({
            todos: result
        })
        // console.log(this.state.todos);//3
    }

    //封装方法 修改所有任务的状态
    checkAllTodo = (status) => {
        let result = this.state.todos.map(item => {
            //修改任务的状态
            item.done = status;
            return item;
        });
        //修改状态 视图
        this.setState({
            todos: result
        })
    }

    //封装方法  清空已经完成的任务
    clearDone = () => {
        //过滤掉数组中已经完成的任务.  保留 done 为 false 的数据
        let result = this.state.todos.filter(item => !item.done);
        this.setState({
            todos: result
        })
    }


    //测试方法是否可用
    componentDidMount(){
        //组件挂载完毕 回调
        // this.addTodo('买书');
        //修改状态
        // this.checkTodo(3, true);
        // this.checkTodo(1, false);
        //删除任务
        // this.delTodo(3);// 1 2  this.setState({todos: [1,2]})
        // this.delTodo(1);// 2 3  this.setState({todos:[2, 3]})
        //修改所有任务的状态
        // this.checkAllTodo(false);
        //清空已经完成的任务
        // this.clearDone()
    }
}
